<template>
  <div :class="className" :style="{ height:height, width:width }" />
</template>

<script>
const lineOption = {
  lineStyle: {
    color: 'rgba(255,255,255,0.6)',
    type: 'dashed'
  }
};
import echarts from 'echarts';
import resize from './mixins/resize';

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    // chartXName: {
    //   type: Array,
    //   required: []
    // },
    chartData: {
      type: Object,
      required: true
    }
  },
  // watch: {
  //   chartData: {
  //     deep: true,
  //     handler(val) {
  //       this.setOption(val)
  //     }
  //   }
  // },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons');
      this.chart.setOption({
        title: {
          show: true,
          x: '30px',
          y: "10px",
          text: '一周排放时长对比图',
          textStyle: {
            color: "#fff",
            fontSize: 16
          }
        },
        backgroundColor: '#627A96',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: [{
          type: 'category',
          data: this.chartData.xAxis,
          axisLine: {
            lineStyle: {
              color: '#ffffff'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            margin: 10,
            color: '#ffffff',
            textStyle: {
              fontSize: 14
            }
          }
        }],
        yAxis: [{
          axisLabel: {
            formatter: '{value}',
            color: '#ffffff'
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#ffffff'
            }
          },
          splitLine: lineOption
        }],
        series: [{
          type: 'bar',
          data: this.chartData.yAxis,
          barWidth: '20px',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#0C57C9' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#16A6FB' // 100% 处的颜色
              }], false)
            }
          }
        }]
      });

      this.chart.on('click', (params) => {
        this.$router.push({ path: '/statistic-mange/statistic-report' });
      });
    }
  }
}
</script>
